<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>菜单管理</title>
	<link type="text/css" rel="stylesheet" th:href="@{/css/page.css}"/>
	<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
	<!-- mmGrid -->
	<link rel="stylesheet" type="text/css" th:href="@{/plug/mmGrid/mmGrid.css}"/>
	<script type="text/javascript"  th:src="@{/plug/mmGrid/mmGrid.js}" ></script>
	<!-- mmGrid page -->
	<link rel="stylesheet" type="text/css" th:href="@{/plug/mmGrid/mmPaginator.css}"/>
	<script type="text/javascript" th:src="@{/plug/mmGrid/mmPaginator.js}" ></script>

	<!-- layer -->
	<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"  media="all"/>
	<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>

	<link type="text/css" rel="stylesheet" th:href="@{/js/layer/skin/layer.css}"/>
	<script type="text/javascript" th:src="@{/js/layer/layer.js}" ></script>
	<style type="text/css">
		/* 仅新增/修改AI推荐相关样式，不改动原有页面样式 */

		/* 1. AI推荐需求输入框样式优化 */
		#userDemand {
			border: 1px solid #ddd;
			border-radius: 4px;
			padding: 6px 10px;
			transition: border-color 0.3s, box-shadow 0.3s;
		}
		#userDemand:focus {
			border-color: #1E9FFF; /* 聚焦时蓝色边框，与layui按钮色调统一 */
			outline: none;
			box-shadow: 0 0 0 2px rgba(30, 159, 255, 0.1); /* 轻微发光效果，提升交互感 */
		}

		/* 2. AI推荐按钮样式优化（保留layui基础样式，增强hover效果） */
		.layui-btn-warm {
			position: relative;
			overflow: hidden;
			transition: all 0.2s ease;
		}
		.layui-btn-warm:hover {
			background-color: #FF6A00 !important; /*  hover时加深色调 */
			transform: translateY(-1px); /* 轻微上浮，增强交互反馈 */
			box-shadow: 0 2px 6px rgba(255, 125, 0, 0.3); /* 轻微阴影，提升层次感 */
		}

		/* 3. AI推荐结果弹窗样式优化 */
		#aiRecommendModal {
			display: none;
			padding: 25px;
			background-color: #fff;
			border-radius: 8px; /* 圆角优化，更现代 */
		}
		#aiRecommendModal h3 {
			text-align: center;
			margin-bottom: 18px;
			color: #333;
			font-size: 16px;
			font-weight: 600;
			padding-bottom: 12px;
			border-bottom: 1px solid #eee; /* 标题下边框，分隔内容 */
		}
		#aiRecommendContent {
			white-space: pre-wrap;
			line-height: 2; /* 行高优化，提升可读性 */
			font-size: 14px;
			color: #444;
			padding: 10px;
			border-radius: 4px;
			background-color: #fafafa; /* 浅灰色背景，区分内容区域 */
			max-height: 280px; /* 限制最大高度，避免弹窗过长 */
			overflow-y: auto; /* 内容超出时滚动 */
		}
		/* 滚动条美化（仅webkit浏览器，不影响功能） */
		#aiRecommendContent::-webkit-scrollbar {
			width: 6px;
			height: 6px;
		}
		#aiRecommendContent::-webkit-scrollbar-thumb {
			border-radius: 3px;
			background-color: #ccc;
		}
		#aiRecommendContent::-webkit-scrollbar-track {
			background-color: #f5f5f5;
		}

		/* 4. AI推荐结果中的菜谱分类高亮（增强内容可读性） */
		#aiRecommendContent span.recipe-type {
			color: #1E9FFF;
			font-weight: 600;
			margin-right: 5px;
		}
	</style>

</head>
<body>
<div  lay-allowclose="true" style="margin-left:15px; width: 98%">
	<div class="first_div" style="border:none;">
		<table class="param_table" style="margin-left:10px;" >
			<tr>
				<td style="width:150px;">
					<span>开始时间：</span>
					<input type="text" id="startTime" name="startTime" class="input_0" />
				</td>
				<td style="width:150px;">
					<span>结束时间：</span>
					<input type="text" id="endTime" name="endTime" class="input_0" />
				</td>
				<!-- AI推荐需求输入框（样式已优化） -->
				<td style="width:250px;">
					<span>AI推荐需求：</span>
					<input type="text" id="userDemand" name="userDemand" class="input_0"
						   placeholder="如：清淡家常菜，30分钟完成"/>
				</td>
				<td style="">
					<div class="layui-btn-group">
						<button class="layui-btn" onclick="search()">查询</button>
						<button class="layui-btn" onclick="addRow()">增加</button>
						<!-- AI推荐按钮（样式已优化） -->
						<button class="layui-btn layui-btn-warm" onclick="showAIRecommend()">AI推荐</button>
					</div>
				</td>
			</tr>
		</table>

		<div style="margin:3px 10px 10px 10px;"></div>
		<div id="exampleTableUser" style="margin-top:5px;" ></div>
		<div id="paginator11-1" align="right" style="margin-right:10px;" ></div>
	</div>
</div>

<!-- AI推荐结果弹窗（样式已优化） -->
<div id="aiRecommendModal">
	<h3>AI菜谱推荐结果</h3>
	<div id="aiRecommendContent">
		<!-- AI推荐内容将通过JS插入 -->
	</div>
</div>

<script type="text/javascript" th:inline="javascript">
	layui.use('laydate', function(){
		var laydate = layui.laydate;
		laydate.render({
			elem: '#startTime'
		});
		laydate.render({
			elem: '#endTime'
		});
	});
	$(function(){
		$('#exampleTableUser').mmGrid({
			root:'rows',// 和后台数据保存列一致,对应MMGridPageVoBean rows
			url:"/sa/getAllFoodByLimit",
			width: 'auto',
			height: 'auto',
			//checkCol: true,
			fullWidthRows: true, //表格第一次加载数据时列伸展，自动充满表格
			showBackboard: false,
			//multiSelect: true,
			indexCol: true,  //索引列
			params:function(){
				var param = new Object();
				param.id = $.trim($("#id").val());
				param.startTime = $.trim($("#startTime").val());
				param.endTime = $.trim($("#endTime").val());
				return param;
			},
			cols: [{title: 'ID', name: 'id', width:60, hidden:true},
				{title: '早餐', name: 'breakfast', width:50},
				{title: '早餐详细信息', name: 'breakfastDesc', width:80},
				{title: '午餐', name: 'lunch', width:50},
				{title: '午餐详细信息', name: 'lunchDesc', width:80},
				{title: '晚餐', name: 'dinner', width:50},
				{title: '晚餐详细信息', name: 'dinnerDesc', width:80},
				{title: '创建日期', name: 'createTime', width:50, renderer:function(val, item, rowIndex){
						return val.split(" ")[0];
					}},
				{title: '操作', name: 'id', width:30, renderer:function(val, item, rowIndex){
						var buttonStr = '<span class="layui-btn layui-btn-sm" onclick="editRowOne('+"\'"+item.id+"\'"+')" >修改</span>' +
								'<span class=" layui-btn layui-btn-danger layui-btn-sm" onclick="deleteRowOne('+"\'"+item.id+"\'"+')" >删除</span>';
						return "<div class='span_btus' >" + buttonStr + "</div>";
					}}
			],
			plugins : [
				$('#paginator11-1').mmPaginator({
					totalCountName: 'total',    //对应MMGridPageVoBean count
					page: 1,                    //初始页
					pageParamName: 'page',      //当前页数
					limitParamName: 'limit', //每页数量
					limitList: [10, 20, 30, 50]
				})
			]
		});
	});

	//原有查询、删除、增加、修改函数完全不变
	function search(){
		$('#exampleTableUser').mmGrid().load({"page":1});
	}
	function deleteRowOne(id){
		layer.confirm('确认删除吗？', {icon: 3, title:'提示'}, function(index){
			var param = [];
			param.push({"name":"ids", "value":id});
			$.ajax({
				type:"POST",
				async:true,  //默认true,异步
				data:param,
				url:"/sa/delFood",
				success:function(data){
					if(data == "SUCCESS"){
						layer.alert('删除成功！', {icon: 1}, function(indexOk){
							search();
							layer.close(indexOk);
						});
					}else if(data=="DontOP"){
						layer.alert('删除失败！自己不能删除自己！', {icon: 2}, function(indexNo){
							layer.close(indexNo);
						});
					}else{
						layer.alert('删除失败！', {icon: 2}, function(indexNo){
							layer.close(indexNo);
						});
					}
				}
			});
		});
	}
	function addRow(){
		layer.open({
			type: 2,
			title: '增加菜谱',
			area: ['55%', '90%'],//宽高
			content: '/sa/addFoodPage' //iframe的url
		});
	}
	function editRowOne(id){
		layer.open({
			type: 2,
			title: '修改菜谱',
			area: ['70%', '90%'],
			content: '/sa/addFoodPage?id='+id //iframe的url
		});
	}

	//AI推荐函数
	function showAIRecommend() {
		// 1. 获取用户输入的需求
		var userDemand = $.trim($("#userDemand").val());
		if (userDemand === "") {
			layer.alert("请输入AI推荐需求（如：清淡家常菜，30分钟完成）", {icon: 2});
			return;
		}

		// 2. 显示加载中弹窗（保持原有样式）
		var loadIndex = layer.load(2, {shade: 0.3});

		// 3. 调用后端AI推荐接口
		$.ajax({
			type: "POST",
			url: "/sa/getAIRecipeRecommend", // 对应Controller的接口路径
			data: {userDemand: userDemand}, // 传递用户需求
			dataType: "text",
			success: function (aiResult) {
				// 关闭加载弹窗
				layer.close(loadIndex);

				// 4. 优化结果格式：给「早餐、午餐、晚餐」添加高亮标记
				var formattedResult = aiResult.replace(/【早餐】/g, '<span class="recipe-type">【早餐】：</span>')
						.replace(/【午餐】/g, '<span class="recipe-type">【午餐】：</span>')
						.replace(/【晚餐】/g, '<span class="recipe-type">【晚餐】：</span>');

				// 5. 显示AI推荐结果（弹窗参数不变，仅内容格式优化）
				$("#aiRecommendContent").html(formattedResult); // 用html()渲染高亮标签
				layer.open({
					type: 1,
					title: "AI菜谱推荐",
					area: ["600px", "500px"], // 弹窗宽高不变
					content: $("#aiRecommendModal"), // 弹窗内容
					shade: 0.3,
					end: function () {
						// 弹窗关闭后清空内容
						$("#aiRecommendContent").text("");
					}
				});
			},
			error: function () {
				layer.close(loadIndex);
				layer.alert("AI推荐请求失败，请检查网络", {icon: 2});
			}
		});
	}
</script>